<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>借书记录</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
	<!--搜索组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-inline">
								<input type="text" name="bookname" id="select_bookname" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">出版社</label>
							<div class="layui-input-inline">
								<input type="text" name="press" id="select_press" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="author" id="select_author" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline" style="width: 450px">
							<label class="layui-form-label">借书时间</label>
								<div class="layui-input-inline">
									<input type="text" style="width: 300px" class="layui-input" name="lendTime" id="select_lendTime" placeholder=" - ">
								</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="borrow-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	<!--信息显示表格组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="borrow-table" lay-filter="borrow-table"></table>
			</div>
		</div>
	<div style="display: none" id="historydetail" >
		<form class="layui-form" action="" >
			<div class="mainBox">
				<div class="main-container">
					<table border="1" cellpadding="0">
						<thead align="center">
						<td>书名</td>
						<td>借书时间</td>
						<td>最后还书时间</td>
						<td>作者</td>
						<td >类别</td>
						</thead>
						<tbody align="center">
						<input  type="hidden" width="80" id="book_id" name="id">
						<td width="80" id="bookname"></td>
						<td width="180" id="lendTime"></td>
						<td width="180" id="sendTime" ></td>
						<td width="80" id="author"></td>
						<td width="100" id="categoryId"></td>
						</tbody>
					</table>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit="" lay-filter="history-submit" id="history-button">
						还书
					</button>
					<button id="close" type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="history-close">
						<i class="layui-icon layui-icon-close"></i>
						关闭
					</button>
				</div>
			</div>
		</form>
	</div>
	<!--查看详情组件-->
		<script type="text/html" id="user-bar">
			 <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="detail"><i class="layui-icon layui-btn-radius"></i>详情</button>
		</script>
		<!--日期格式化组件-->
		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common','laydate'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
                let laydate = layui.laydate;
				let index ;

				let MODULE_PATH = "operate/";

				let cols = [
					[
						{
							title: '书名',
							field: 'bookname',
							align: 'center',
							templet: '<div>{{d.book.bookname}}</div>'
						},
						{
							title: '出版社',
							field: 'press',
							align: 'center',
							templet: '<div>{{d.book.press}}</div>'
						},
						{
							title: '作者',
							field: 'author',
							align: 'center',
							templet: '<div>{{d.book.author}}</div>'
						},
						{
							title: '位置信息',
							field: 'vailbookId',
							align: 'center',
							templet: place

						},
						{
							title: '借书时间',
							field: 'lendTime',
							align: 'center',
							sort: true,
							templet:"<div>{{layui.util.toDateString(d.lendTime,'yyyy-MM-dd')}}</div>"
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center'
						}
					]
				]
				function place(d) {
					let str;
					if (d.book.vailbookId == 1) {
						str = '2馆1号架';
					} else if (d.book.vailbookId == 2) {
						str = '2馆2号架';
					} else if (d.book.vailbookId == 3) {
						str = '3馆3号架';
					}
					return str;
				}
				table.render({
					elem: '#borrow-table',
					url: 'http://47.93.226.229/selectbyuserid/'+JSON.parse(localStorage.getItem("user1")).id,
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(borrow-table)', function(obj) {
					if (obj.event === 'detail') {
						window.detail(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(borrow-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(borrow-query)', function (data) {
					// borrowbk=layui.util.toDateString(data.field.borrowbk, "yyyy-MM-dd");
					let lendTime = data.field.lendTime;
					if (lendTime !=''){
						lendTime = new Date(lendTime);
						data.field.lendTime = lendTime
					}else
						delete  data.field.lendTime;
					// let sendTime = data.field.sendTime;
					// if (sendTime !=''){
					// 	sendTime = new Date(sendTime);
					// 	data.field.sendTime = sendTime
					// }else
					// 	delete  data.field.sendTime;
					data.field.page = 1;
					data.field.limit = 5;
					$.ajax({
						url: 'http://47.93.226.229/selectbyuserid/'+JSON.parse(localStorage.getItem("user1")).id,
						data: data.field,//data，规定要发送服务器的数据
						type: "GET",//规定请求的类型
						dataType: "json",//预期服务器相应的类型
						success: function (a) {
							table.reload('borrow-table', {
								where: {
									bookname: $("#select_bookname").val(),
									press: $("#select_press").val(),
									author: $("#select_author").val(),
									lendTime:data.field.lendTime,
								}, page: {
									curr: 1 //重新从第 1 页开始
								}
							})
						}
					});
					return false;
				});

				window.detail = function(obj) {
					let data = obj.data; //获得当前行数据
					if (obj.data.sendTime!=null) {
						$("#history-button").addClass("layui-btn layui-btn-radius layui-btn-disabled").prop("disabled" , true);
					}
					$.get(
							'http://47.93.226.229/selectBook' + data.book.bookid, function (obj1) {
								index=layer.open({
									closeBtn:1,
									type: 1,
									title: '详情',
									shade: 0.1,
									area: [common.isModile() ? '100%' : '600px', common.isModile() ? '100%' : '200px'],
									content: $('#historydetail')
								})
								content: $("#book_id").val(data.id);
								content: $("#bookname").text(data.book.bookname);
								// if (data.lendTime !=null) {
								// 	obj1.data.lendTime=layui.toDateString(obj1.data.lendTime,'yyyy-MM-dd HH:mm:ss')
								// }
								let created = layui.util.toDateString(data.lendTime, "yyyy-MM-dd");
								let send = layui.util.toDateString(data.sendTime, "yyyy-MM-dd");
								content: $("#lendTime").text(created);
								content: $("#sendTime").text(send);
								if (data.book.categoryId == 1) {
									data.book.categoryId = '计算机类';
								} else if (data.book.categoryId == 2) {
									data.book.categoryId = '文史类';
								} else if (data.book.categoryId == 3) {
									data.book.categoryId = '社科类';
								}
								content: $("#categoryId").text(data.book.categoryId);
								content: $("#author").text(data.book.author);

							})
				};

				form.on('submit(history-submit)', function (a) {
					$.post(
							'http://47.93.226.229/SendBookWithId',
							a.field,
							function(a){
								console.log('success');
								layer.close(index);//关闭当前页
								table.reload("borrow-table");
							}
					)
				});
				form.on('submit(history-close)', function (a) {
								layer.close(index);//关闭当前页
								table.reload("borrow-table");
							}
					);


                // 日期时间范围
                laydate.render({
                    elem: '#select_lendTime'
                    // ,type: 'datetime'
                    // ,range: false
                });

				window.refresh = function(param) {
					table.reload('borrow-table');
				}
			})
		</script>
	</body>
</html>
